<template>
	<view class="control">
		<nav-bar title="统计" :color="navBarColor" :bg="navBarBg" />
		<view class="header">
			<view class="top">
				<view class="time-item flex-center" @click="showcampus = true">
					<text v-if="campus_s">全部校区</text>
					<text v-else>{{campus}}</text>
					<image mode="aspectFit"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/63f4a944e2c855ceddefa48e7aa384d11f45f23b.png" />
				</view>
				<view class="time-item flex-center" @click="showcoach = true">
					<text v-if="coach_s">全部教练</text>
					<text v-else>{{coach}}</text>
					<image mode="aspectFit"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/63f4a944e2c855ceddefa48e7aa384d11f45f23b.png" />
				</view>
				<!-- 时间 -->
				<view class="time-item flex-center" @click="showTime = true">
					<text>{{date.getFullYear()}}</text>-<text>{{date.getMonth() + 1}}</text>
					<image mode="aspectFit"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/63f4a944e2c855ceddefa48e7aa384d11f45f23b.png" />
				</view>
				<!-- <view class="time-item flex-center" @click="showTime = true">
					<text>{{date.getMonth() + 1}}月份</text>
					<image mode="aspectFit"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/63f4a944e2c855ceddefa48e7aa384d11f45f23b.png" />
				</view> -->
			</view>
			<view class="bottom">
				<view class="bottom-item">
					<view class="flex-align">
						<view class="num">21</view>
						<view class="unit">次</view>
					</view>
					<view class="info">班级总数</view>
				</view>
				<view class="bottom-item">
					<view class="flex-align">
						<view class="num">106</view>
						<view class="unit">课</view>
					</view>
					<view class="info">课时总数</view>
				</view>
				<view class="bottom-item">
					<view class="flex-align">
						<view class="num">106</view>
						<view class="unit">人</view>
					</view>
					<view class="info">学院总数</view>
				</view>
				<view class="bottom-item">
					<view class="flex-align">
						<view class="num">106</view>
						<view class="unit">次</view>
					</view>
					<view class="info">核销次数</view>
				</view>
			</view>
		</view>

		<view class="tilte-box flex-center">
			实时统计
			<image mode="aspectFit"
				src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/acec03ef721f1dd116c3dafc00abfc213913cc2d.png" />
		</view>
		<view class="con">
			<view class="con-item" v-for="(item,id) in 7" :key="id">
				<view class="cell flex-space-between">
					<view class="title">暑期游泳班</view>
					<view class="flex-align">
						<view class="cel-info"
							style="float: left; width: auto;height: 42rpx;background-color: #e8f6f2;border-radius: 30rpx;margin-top: 0rpx;padding: 0rpx 20rpx; ">
							<view style="float: right;line-height: 42rpx;color: #1aa384;margin-right: 6rpx;">
								高启兰
							</view>
						</view>
						<view class="cel-info"
							style="float: left; width: auto;height: 42rpx;background-color: #fbdafd;border-radius: 30rpx;margin-top: 0rpx;padding: 0rpx 20rpx; ">
							<view style="float: right;line-height: 42rpx;color: #ee58f6;margin-left: 6rpx;">
								紫琅校区
							</view>
						</view>
						<!-- <view class="cel-info flex-align">
							<image mode="aspectFit"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/b7fbc9a4edc3f956d845b31c625e6123ebab3127.png" />
							<text>50人</text>
						</view>
						<view class="cel-info flex-align">
							<image mode="aspectFit"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/ad2d276da70b70d5dd15a0c5ff08bab85aace623.png" />
							<text>10/20课</text>
						</view>
						<view class="cel-info flex-align">
							<image mode="aspectFit"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9842024ac60f0acf7a820419c4afff0626406fbf.png" />
							<text>1000课次</text>
						</view> -->
					</view>
				</view>
				<view class="list" :animation="animationData[id]">
					<view class="list-con" :class="[`list-con-${id}`]">
						<view class="item flex-align" v-for="item in 3" :key="item">
							<view class="item-1">
								第一节 游泳基本概念
							</view>
							<view class="item-2">
								已核销：<text>50</text>
							</view>
							<view class="item-3">
								剩余：<text>50</text>
							</view>
						</view>
						<view class="item flex-align">
							<view class="item-1" style="font-weight: 550;">
								合计：共50学员，1000课次，已核销1000课次
							</view>
						</view>
					</view>
				</view>
				<view class="click flex-center" @click="handChange(id)">
					<view class="icon">
						<van-icon name="arrow-down" color="#8b85e6" size="31rpx" />
					</view>
				</view>
			</view>
		</view>

		<!-- 年月弹窗 -->
		<van-popup :show="showTime" round position="bottom" @close="showTime = false">
			<van-datetime-picker type="year-month" :value="date.getTime()" @confirm="configTime"
				@cancel="showTime = false" />

		</van-popup>
		<!-- 全部校区 -->
		<van-popup :show="showcampus" round position="bottom" @close="showcampus = false">
			<van-picker show-toolbar :value="campus" :columns="columns " @confirm="configcampus"
				@cancel="showcampus = false" />
		</van-popup>
		<!-- 全部教练 -->
		<van-popup :show="showcoach" round position="bottom" @close="showcoach = false">
			<van-picker show-toolbar :value="coach" :columns="coachlist " @confirm="configcoach"
				@cancel="showcoach = false" />
		</van-popup>
	</view>
</template>

<script>
	import navbar from '@/mixins/navbar.js';

	export default {
		mixins: [navbar({
			navBarColor: '#fff'
		})],
		data() {
			return {
				active: [],
				date: new Date(), //时间
				animationData: [],
				showTime: false, //时间
				campus_s: true, //校区
				showcampus: false, //校区
				coach_s: true, //教练
				coach: '', //教练
				showcoach: false, //教练
				campus: '', //校区
				columns: [{
						text: '全部校区',
						id: '10'
					},
					{
						text: '杭州校区',
						id: '10'
					},
					{
						text: '宁波校区',
						id: '20'
					},
					{
						text: '温州校区',
						id: '30'
					},
				],
				coachlist: [{
						text: '全部教练',
						id: '10'
					},
					{
						text: '宗教练',
						id: '10'
					},
					{
						text: '袁教练',
						id: '20'
					},
					{
						text: '石教练',
						id: '30'
					},
				],
			}
		},
		methods: {
			// 时间
			configTime(e) {
				this.date = new Date(e.detail)
				this.showTime = false
			},
			// 全部校区
			configcampus(e) {
				this.campus = e.detail.value.text
				this.showcampus = false
				this.campus_s = false
			},
			// 全部教练
			configcoach(e) {
				this.coach = e.detail.value.text
				this.showcoach = false
				this.coach_s = false
			},
			handChange(index) {
				let animation = uni.createAnimation({
					duration: 200,
					timingFunction: 'linear'
				})
				//隐藏
				if (this.active.includes(index)) {
					animation.height(0).opacity(0).step()
					this.animationData[index] = animation.export()
					this.active = []
				} else {
					let query = uni.createSelectorQuery().in(this)
					query.select(`.list-con-${index}`).boundingClientRect(data => {
						let height = data.height
						//关闭其他
						if (this.active.length > 0) {
							this.handChange(this.active[0])
						}
						this.active = [index]
						animation.height(height).opacity(1).step()
						this.animationData[index] = animation.export()
					}).exec()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		padding: 30rpx 30rpx;
		background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/e0e8930f64776e28ff039bef931b8833869e1f54.png");
		background-repeat: no-repeat;
		background-color: rgb(243, 243, 243);
		background-size: 100% auto;
		min-height: 100vh;

		.header {
			background-color: rgb(255, 255, 255);
			border-radius: 4rpx;
			padding: 30rpx 0rpx 54rpx;

			.top {
				display: flex;
				justify-content: center;

				.time-item {
					padding: 20.6rpx 30rpx 20.6rpx 43rpx;
					background-color: rgb(243, 245, 247);
					border-radius: 4rpx;
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 700;
					margin-right: 20rpx;
					// &:first-of-type {
					// 	margin-right: 20rpx;
					// }

					image {
						width: 13rpx;
						height: 11rpx;
						margin-left: 8rpx;
					}
				}
			}

			.bottom {
				margin-top: 29rpx;
				display: flex;

				.bottom-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.num {
						color: rgb(51, 51, 51);
						font-size: 45rpx;
						font-weight: 700;
					}

					.unit {
						color: rgb(47, 117, 250);
						font-size: 24rpx;
						font-weight: 500;
						margin-left: 5rpx;
						transform: translateY(8rpx);
					}

					.info {
						margin-top: 7rpx;
						align-self: center;
						color: rgb(153, 153, 153);
						font-size: 24rpx;
						font-weight: 500;
					}
				}
			}
		}

		.tilte-box {
			padding: 38rpx 0 37rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 4rpx;
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 700;
			margin-top: 40rpx;

			image {
				width: 36rpx;
				height: 30rpx;
				margin-left: 8rpx;
			}
		}

		.con {
			.con-item {
				margin-top: 30rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 4rpx;

				.cell {
					padding: 39rpx 9rpx 0rpx 31rpx;

					.title {
						color: #000;
						font-size: 30rpx;
						font-weight: 700;
					}

					.cel-info {
						color: rgb(51, 51, 51);
						font-size: 22rpx;
						font-weight: 500;
						margin-right: 20rpx;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 9rpx;
						}
					}
				}

				.list {
					height: 0;
					overflow: hidden;

					.item {
						padding: 36rpx 31rpx 14rpx;
						border-bottom: dashed 6rpx rgb(239, 239, 239);

						&:last-of-type {
							border-bottom: 0;
						}

						.item-1 {
							color: rgb(51, 51, 51);
							font-size: 24rpx;
							font-weight: 500;
						}

						.item-2 {
							margin-left: 28%;
							color: rgb(51, 51, 51);
							font-size: 24rpx;
							font-weight: 500;

							text {
								color: rgb(250, 47, 76);
								font-size: 24rpx;
								font-weight: 700;
							}
						}

						.item-3 {
							margin-left: 2%;
							color: rgb(51, 51, 51);
							font-size: 24rpx;
							font-weight: 500;

							text {
								color: rgb(250, 47, 76);
								font-size: 24rpx;
								font-weight: 700;
							}
						}
					}
				}
			}
		}
	}
</style>
